<template>
  <container>
    <div class="filter-container">
      <el-form ref="form" :inline="true" :model="queryParams" class="form-inline">
        <el-row>
          <el-col :span="6">
            <el-form-item label="角色名称" prop="name">
              <el-input placeholder="请输入内容" v-model="queryParams.name"  prefix-icon="el-icon-search" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18" class="btn-container">
            <el-button icon="el-icon-search" type="primary"  @click="search">查询</el-button>
            <el-button icon="el-icon-refresh"  @click="search('reset')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="btn-container">
      <el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
    </div>
    <el-table
      :data="dataTable"
      row-key="id"
      :indent="36"
      style="width: 100%"
      default-expand-all>
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="id" label="角色编号" ></el-table-column>
      <el-table-column prop="name" label="角色名称"></el-table-column>
      <el-table-column label="操作"  align="center">
        <template slot-scope="scope">
          <div class="operation-btn">
            <el-button icon="el-icon-edit" @click="edit(scope.row.id,scope.row.name)" type="text"
            >编辑</el-button>
            <el-popconfirm title="您确定要删除吗？"
                           @confirm="deleteById(scope.row.id,scope.row.name)">
              <el-button icon="el-icon-delete" slot="reference" type="text" class="btn-danger">删除</el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pagesize"
      @pagination="loadData"
    />

    <el-dialog :title="title"  v-if="dialogNewVisible==true"
               :close-on-click-modal="false"
               :visible.sync="dialogNewVisible"
               @close="cloaseDialog" custom-class="center-dialog">
      <slot name="-" style="border: none;padding: 0px;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="width:95%" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="ruleForm.name" ></el-input>
          </el-form-item>

          <el-form-item style="margin-right:100px">
            <el-button v-if="isAdd==true" type="primary" @click="add">确认</el-button>
            <el-button v-if="isAdd==false" type="primary" @click="saveEdit">保存</el-button>
            <el-button @click="cloaseDialog">取消</el-button>
          </el-form-item>
        </el-form>
      </slot>
    </el-dialog>
  </container>
</template>

<script>
import { rolesListPage, addRoles, updateRoles, deleteRoles } from '@/api/orgm/orgm'
import Pagination from '@/components/Pagination';
export default {
  name: "role",
  data() {
    return {
      title:'',
      isAdd:true,
      dataTable:[],
      total:0,
      // 查询参数
      queryParams: {
        name:'',
        page: 1,
        pagesize: 10
      },
      dialogNewVisible: false,
      ruleForm: {
        id:'',
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    Pagination
  },//页面加载后渲染
  mounted(){
    this.loadData();
  },
  methods:{
    //dialog关闭事件
    cloaseDialog(){
      this.dialogNewVisible = false;
      this.loadData();
    },//初始化表格数据
    loadData(){
      rolesListPage(this.queryParams).then(res => {
        if(res.error=="200"){
          this.dataTable = res.result.list;
          this.total=res.result.total;
        }
        else{
          this.$message.error("获取失败");
        }
      })
    },
    reload(){
      this.loadData();
    },//新建
    openDialog(){
      this.title="新建";
      this.isAdd=true;
      this.ruleForm.name='';
      this.ruleForm.id='';
      this.dialogNewVisible = true;
    },//编辑
    edit(id,name){
      this.isAdd=false;
      this.title="修改";
      this.ruleForm.name=name;
      this.ruleForm.id=id;
      this.dialogNewVisible = true;
    },//加载所属类型
    //新增
    add(){
      if(this.ruleForm.name==""){
        this.$message.error("请填写角色名称");
        return;
      }
      addRoles(this.ruleForm).then(res => {
        if(res.error=="200"){
          this.$message.success("添加成功");
          this.dialogNewVisible = false;
          setTimeout(()=>{this.reload();},1000);
        }
        else{
          this.$message.error("增加失败");
        }
      })
    },//保存
    saveEdit(){
      updateRoles(this.ruleForm).then(res => {
        if(res.error=="200"){
          this.$message.success("修改成功");
          this.dialogNewVisible = false;
          setTimeout(()=>{this.reload();},1000);
        }
        else{
          this.$message.error("修改失败");
        }
      })
    },//删除
    deleteById(id,name){
      this.$confirm("确定要删除["+name+"]?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ruleForm.name=name;
          this.ruleForm.id=id;
          deleteRoles(this.ruleForm).then(res => {
            if(res.error=="200"){
              this.$message.success("删除成功");
              this.dialogNewVisible = false;
              setTimeout(()=>{this.reload();},1000);
            }
            else{
              this.$message.error("删除失败");
            }
          })
        })
        .catch(() => {
          this.ruleForm.name='';
          this.ruleForm.id='';
        });
    },
    search(type) {
      if (type === 'reset') {
        this.$refs.form.resetFields();
      }
      this.reload();
    }
  }

}

</script>
